<template>
	<view class="content-body" :class="{'edit-page':isEdit}">
		<!-- 顶部图片 -->
		<view class="image-container">
			<image :src="roomUrl" style="width: 100%;height: 100%;"></image>
			<view style="position: absolute;top: 170rpx; left: 50rpx; font-size: 45rpx;font-weight: 500;color: white;">
				{{roomInfo.name}}
			</view>
			<view style="position: absolute;top: 240rpx;left: 50rpx; color: white; font-size: 25rpx;">
				会议室地点:{{roomInfo.address}}</view>
			<!-- <view class="top-image-top"></view> -->
		</view>
		<!-- 中间预约状态说明 -->
		<view style="display: flex; height: 60rpx;">
			<view style="width: 3%;"></view>
			<view style="width: 30%;font-weight: 600; font-size: 35rpx;">{{selectedMonthStr}}</view>
			<view style="width: 10%;"></view>
			<view style="display: flex;width: 55%;height: 100%;">
				<view
					style="width: 15%;margin-top: 18rpx;height: 24rpx ;background-color: #006CF9;border-radius: 10rpx;">
				</view>
				<view style="width: 3%;"></view>
				<view style="width: 20%;height: 60rpx;line-height: 60rpx;font-size:15rpx ">当前预约</view>
				<view
					style="width: 15%;margin-top: 18rpx;height: 24rpx ;background-color: #bfb0b0;border-radius: 10rpx;">
				</view>
				<view style="width: 3%;"></view>
				<view style="width: 20%;height: 60rpx;line-height: 60rpx; font-size:15rpx">不可预约</view>
				<view
					style="width: 15%;margin-top: 18rpx;height: 24rpx ;background-color: #FFAF26 ;border-radius: 10rpx;">
				</view>
				<view style="width: 3%;"></view>
				<view style="width: 20%;height: 60rpx;line-height: 60rpx; font-size:15rpx">已经预约</view>
			</view>
		</view>
		<!-- 日期选择组件 -->
		<view style="display: flex;">
			<view style="width: 1%;"></view>
			<view style="width: 14%;margin-left: 2%;margin-right: 2%;" v-for="(item,index) in weekAndDayInfo"
				:class="{'selected': selectedIndex === index }" @click="selectDay(index,item.timestamp)">
				<view style="text-align: center;">{{item.weekday}}</view>
				<view style="text-align: center;">{{item.date}}</view>
			</view>
		</view>
		<!-- 时间选择组件 -->
		<view style="height: 130rpx;">
			<view style="margin:20rpx;">
				<uv-button v-for="(item,index) in timeArr"
					style="display:inline-block;width:80rpx; margin-left: 4rpx; margin-right:4rpx; height:50rpx;"
					:color="getButtonType(item.status)" :disabled="getIsDisabled(item.status)"
					@click="changTime(item,index)">{{item.timeOver}}</uv-button>
			</view>
		</view>
		<!-- 中下部分大盒子 -->
		<view class="mid-under-box">
			<!-- 预约信息部分 -->
			<view class="review-info">
				<view class="review-info-body">
					<view style="font-size: 30rpx; font-weight: 600;">预定信息</view>
					<view style="display: flex;margin-bottom: 5rpx;">
						<view style="width: 25%; color: #667685 ;">预定人员:</view>
						<view style="width: 75%;">{{reserveUserName}}</view>
					</view>
					<view style="display: flex;padding-bottom: 10rpx; border-bottom: 1px solid #F2F2F2 ;">
						<view style="width: 25%;color: #667685 ;">会议名称:</view>
						<input style="width: 75%;" v-model="meetingName" />

					</view>
					<view style="display: flex;margin-top: 5rpx;">
						<view style="width: 25%;color: #667685 ; margin-top: 5px;">会议类型:</view>
						<uni-data-checkbox mode="tag" v-model="selectedMeetingMode"
							:localdata="meetingMode"></uni-data-checkbox>
					</view>
					<view style="display: flex;">
						<view style="width: 25%;color: #667685 ; margin-top: 5px;">会服人员:</view>
						<uni-data-checkbox mode="tag" v-model="needServe"
							:localdata="needServeList"></uni-data-checkbox>
					</view>
				</view>
			</view>

			<view class="other-info">
				<view class="other-info-body">
					<view style="font-size: 30rpx; font-weight: 600;">其他服务</view>
					<view style="display: flex;margin-bottom: 10rpx;">
						<view style="width: 25%; color: #667685 ; " @click="selectDevices">设备需求:</view>
						<view style="width: 75%;" @click="selectDevices">
							<view class="text-area">
								<text class="value">{{selectedDevicesStr || "请选择"}}</text>
							</view>

						</view>
					</view>
					<view style="display: flex;margin-bottom: 10rpx;" @click="selectGoods">
						<view style="width: 25%; color: #667685 ;">物品需求:</view>
						<view style="width: 75%;">
							<view class="text-area">
								<text class="value">{{selectedGoodsStr || "请选择"}}</text>
							</view>
						</view>
					</view>
					<view style="display: flex;margin-bottom: 10rpx;" @click="show">
						<view style="width: 25%; color: #667685 ;">参会人员:</view>
						<view style="width: 75%; 
						white-space: nowrap; overflow: hidden;
						text-overflow: ellipsis;
						width:75%; ">
							<view class="text-area">
								<uni-popup ref="cityMore" type="bottom">
									<more-selecttwo :cityData="departmentList" @chooseCity="chooseCity"
										@switchCity="switchCity" :cityIndex="cityIndex" @scrollCity="scrollCity"
										@closeCity="closeCity" @queryCity="queryCity" :oldScrollTop="oldScrollTop"
										:scrollTop="scrollTop" :chooseCityList="chooseCityList" :title="title"
										:cityIdArr="cityIdArr" @delCity="delCity" ref="moreselects" :maxCount="maxCount"
										:level="level" :colorValue="colorValue"></more-selecttwo>
								</uni-popup>
							</view>
							{{selectedAccountNames|| "请选择"}}
						</view>
					</view>
					<view style="display: flex;margin-bottom: 10rpx;">
						<view style="width: 25%; color: #667685 ;">其他需求:</view>
						<view style="width: 75%;">
							<input style="width: 75%;" placeholder="请输入其他需求" v-model="content" />
						</view>
					</view>
				</view>
			</view>


			<view style="height: 250rpx;width: 100%;">
				<view class="review-info-botten">
					<view style="font-size: 30rpx; font-weight: 600;margin-left: 20rpx;padding-top: 20rpx;">温馨提示：</view>
					<view class="review-info-botten-body" @click="callPhone(phone)">
						预定时间距会议开始小于3小时，请线上预定后致电会服：<span style="color: blue;">{{phone}}</span>。
					</view>
				</view>
			</view>
			<view style="height: 200rpx;width: 100%;"></view>

		</view>

		<multiple-select :value="showGoodsList" :data="goodList" @confirm="confirmGoods"
			@cancel="handleCnacelGoods"></multiple-select>
		<multiple-select :value="showDevicesList" :data="deviceList" @confirm="confirmDevices"
			@cancel="handleCnacelDevices"></multiple-select>
		<uv-toast ref="toast"></uv-toast>
		<!-- 底部预约按钮 -->
		<view class="footer-button" @click="submitForm" v-if="!this.isEdit">
			<view class="footer-button-info">预定</view>
		</view>
	</view>
</template>

<script>
	import loginVue from '../../login/login.vue';
	import api from '@/api/api.js';
	import util from '@/api/util.js'
	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
	import moreSelect from '../../changeMoreSelect/components/more-select.vue'
	import moreSelecttwo from '../../changeMoreSelect/components/more-selecttwo.vue'
	import multipleSelect from "@/components/momo-multipleSelect/momo-multipleSelect.vue";

	export default {
		components: {
			multipleSelect,
			moreSelecttwo
		},

		data() {
			return {
				phone: "59116666",
				isEdit: false,
				meetingInfo: {},
				meetingAndTimePrice: 0,
				totalPrice: 0,
				roomUrl: '',
				selectedDate: '',
				roomPrice: 0,
				differenceInMinutes: 0,
				timeEnd: '',
				timeStart: '',
				selectedGoods: [],
				selectedDevices: [],
				selectedAccountIds: [],
				selectedDepartmentIds: [],
				reserveUserName: '',
				content: '',
				meetingName: '',
				InitDateTemp: '',
				//人员组件需要的数据
				appointTimeArr: [],
				selectedAccountNames: '',
				level: 2,
				title: '选择人员',
				chooseCityList: [],
				cityIdArr: [],
				cityData: [],
				scrollTop: 0,
				oldScrollTop: 0,
				cityIndex: 0,
				maxCount: 999,
				cityName: "",
				colorValue: "#016CE1",
				//----------------------
				showDevicesList: false, //是否显示 - 双向绑定
				showGoodsList: false,
				info: "",
				selectedDevicesStr: '',
				selectedGoodsStr: '',
				departmentList: [],
				deviceList: [],
				goodList: [],
				defaultSelected: ["3", "5"], //默认选中项
				needServe: 0,
				selectedMeetingMode: 0,
				selectedIndex: 0,
				isSelected: false,
				roomInfo: {},
				selectedMonthStr: '',
				weekAndDayInfo: [],
				meetingMode: [{
						"value": 0,
						"text": "内部会议"
					},
					{
						"value": 1,
						"text": "外部会议"
					},
				],
				needServeList: [{
						"value": 0,
						"text": "无需会服"
					},
					{
						"value": 1,
						"text": "需要会服"
					},
				],
				timeArr: [{
						'timeBegin': '08:00',
						'timeOver': '08:30',
						'status': 0
					},
					{
						'timeBegin': '08:30',
						'timeOver': '09:00',
						'status': 0
					},
					{
						'timeBegin': '09:00',
						'timeOver': '09:30',
						'status': 0
					},
					{
						'timeBegin': '09:30',
						'timeOver': '10:00',
						'status': 0
					},
					{
						'timeBegin': '10:00',
						'timeOver': '10:30',
						'status': 0
					},
					{
						'timeBegin': '10:30',
						'timeOver': '11:00',
						'status': 0
					},
					{
						'timeBegin': '11:00',
						'timeOver': '11:30',
						'status': 0
					},
					{
						'timeBegin': '11:30',
						'timeOver': '12:00',
						'status': 0
					},
					{
						'timeBegin': '13:00',
						'timeOver': '13:30',
						'status': 0
					},

					{
						'timeBegin': '13:30',
						'timeOver': '14:00',
						'status': 0
					},
					{
						'timeBegin': '14:00',
						'timeOver': '14:30',
						'status': 0
					},
					{
						'timeBegin': '14:30',
						'timeOver': '15:00',
						'status': 0
					},
					{
						'timeBegin': '15:00',
						'timeOver': '15:30',
						'status': 0
					},
					{
						'timeBegin': '15:30',
						'timeOver': '16:00',
						'status': 0
					},
					{
						'timeBegin': '16:00',
						'timeOver': '16:30',
						'status': 0
					},
					{
						'timeBegin': '16:30',
						'timeOver': '17:00',
						'status': 0
					}

				],
			}
		},
		created() {
			this.queryGoodsList();
			this.queryDepartmentList();
			this.queryCurrentUser();
		},
		onLoad(options) {
			console.log(options);
			if (options.id) {
				this.isEdit = false;
				const id = options.id;
				const date = options.date;
				this.InitDateTemp = options.dateTemp;
				console.log(date);
				this.getRoomInfo(id);
				this.getDateAndWeek(date);
				this.queryCurrentUserId();
			} else {
				this.isEdit = true;
				const meetingId = options.meetingId;
				this.getDetail(meetingId);
			}

		},
		watch: {
			timeStart() {
				this.getResultTimeNumber(this.timeStart, this.timeEnd);
			},
			timeEnd() {
				this.getResultTimeNumber(this.timeStart, this.timeEnd);
			},
			selectedMeetingMode(val) {
				if (val == 0) {
					console.log('000');
					this.roomPrice = this.roomInfo.inPrice;
				} else if (val == 1) {
					console.log('111');
					this.roomPrice = this.roomInfo.outPrice;
				}
			},
		},

		methods: {
			callPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel.toString(), // 确保传递的是字符串类型
					success() {
						console.log('拨打电话成功');
					},
					fail(err) {
						console.error('拨打电话失败', err);
					}
				});
			},
			//编辑页面
			getDetail(id) {
				util.request(
					api.MeetingDetail + '/' + id, {},
					'GET'
				).then((data) => {
					console.log(data);
					this.meetingInfo = data;
					this.InitDateTemp = this.meetingInfo.startTime;
					this.getRoomInfo(this.meetingInfo.roomId);
					console.log(this.meetingInfo);
					const date = this.timestampToDateString(this.meetingInfo.startTime);
					console.log(date);
					this.getDateAndWeek(date);
					this.reserveUserName = this.meetingInfo.createName;
					this.meetingName = this.meetingInfo.name;
					if (this.meetingInfo.isInout == '内部会议') {
						this.selectedMeetingMode = 0;
					} else {
						this.selectedMeetingMode = 1;
					}
					this.needServe = this.meetingInfo.livery;
					if (this.meetingInfo.employQueryVoResponseList.length > 0) {
						this.selectedGoodsStr = this.meetingInfo.employQueryVoResponseList.map(item => item
							.goodName).join('/');
					}
					if (this.meetingInfo.equipmentQueryVoResponseList.length > 0) {
						this.selectedDevicesStr = this.meetingInfo.equipmentQueryVoResponseList.map(item => item
							.deviceName).join('/');
					}
					this.selectedAccountNames = this.meetingInfo.accountNames;
					this.content = this.meetingInfo.content;
				})
			},
			showToast(params) {
				this.$refs.toast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},
			//将当前用户默认添加到参会人员当中
			queryCurrentUserId() {
				util.request(
					api.AccountCurrent, {},
					'GET'
				).then((res) => {
					this.selectedAccountIds.push(res.id);
					this.selectedDepartmentIds.push(res.departmentId);
					this.cityIdArr.push(res.id);
					this.chooseCityList.push({
						id: res.id,
						name: res.name,
						pid: res.departmentId,
						parentName: res.departmentName
					});
					this.selectedAccountNames = res.name;
				});
			},
			//提交方法
			submitForm() {
				if (!this.meetingName || !this.roomInfo.id || !this.timeStart || !this.timeEnd || !this.selectedDate) {
					this.showToast({
						type: 'warning',
						title: '表单输入有错误',
						message: '将预约信息填写完整'
					});
					return;
				}
				//格式化预约的两个时间船渡给后端
				// this.saveAppoint();
				//格式化部门与人员ID传递
				this.selectedDepartmentIds = this.chooseCityList.map(item => item.pid);
				this.selectedAccountIds = this.chooseCityList.map(item => item.id);
				//格式化设备和物品集合
				this.selectedDevices = this.deviceList.filter(itemA => this.selectedDevices.some(itemB => itemA.id ===
					itemB.id));
				console.log(this.selectDevices);
				this.selectedGoods = this.goodList.filter(itemA => this.selectedGoods.some(itemB => itemA.id === itemB
					.id));


				const newDeviceList = this.selectedDevices.map(item => ({
					deviceId: item.id,
					deviceName: item.name,
					devicePrice: item.price,
					deviceNum: item.num,
					deviceGross: item.num * item.price,
					deviceUnit: item.unit
				}));
				const newGoodList = this.selectedGoods.map(item => ({
					goodId: item.id,
					goodUnit: item.unit,
					goodPrice: item.price,
					goodName: item.name,
					goodNum: item.num,
					grossPrice: item.num * item.price
				}));

				this.meetingAndTimePrice = this.differenceInMinutes * this.roomPrice;

				let total = this.roomInfo.fixedPrice + this.meetingAndTimePrice + this.roomInfo.handlingExpense;
				console.log(this.roomInfo.fixedPrice, this.meetingAndTimePrice, this.roomInfo.handlingExpense, this
					.roomInfo.taxRate);
				// return false;
				let form = {
					name: this.meetingName,
					content: this.content,
					roomId: this.roomInfo.id,
					totalPrice: this.meetingMode == 0 ? total : (total + total * (this.roomInfo.taxRate / 100)),
					accountIds: this.selectedAccountIds,
					reserveStartTime: this.formatFinalStartDateTime(this.selectedDate, this.timeStart),
					reserveEndTime: this.formatFinalStartDateTime(this.selectedDate, this.timeEnd),
					isInout: this.selectedMeetingMode == 0 ? '内部会议' : '外部会议',
					livery: this.needServe,
					liveryId: '0',
					departmentIds: this.selectedDepartmentIds,
					handlingExpense: this.roomInfo.handlingExpense,
					taxRate: this.roomInfo.taxRate,
					employCreateBoRequestslist: newGoodList,
					equipmentCreateBoRequestslist: newDeviceList
				}
				console.log(form);
				// return false;
				let params = Object.assign({}, form);
				util.request(
					api.CreateMeeting, params,
					'POST'
				).then((data) => {
					this.showToast({
						type: 'success',
						title: '创建成功',
						message: '预约会议成功'
					});
					uni.getStorage({
						key: 'roleId',
						success: (res) => {
							console.log('获取当前的roleId', res.data);
							if (res.data == 1) {
								setTimeout(() => {
									console.log('aaa');
									//重新加载关闭所有页面
									uni.reLaunch({
										url: './myMeetings'
									});
								}, 1000);
							} else {
								setTimeout(() => {
									uni.reLaunch({
										url: './myMeeting'
									});
								}, 1000);
							}
						}
					});

				})

			},

			formatFinalStartDateTime(date, time) {
				const givenDate = new Date(date);
				console.log(time);
				const [hours, minutes] = time.split(':').map(Number);
				const newDate = new Date(givenDate.getFullYear(), givenDate.getMonth(), givenDate.getDate(), hours,
					minutes);
				return newDate.getTime();
			},

			//计算时间差 用于计算会议室使用价格
			getResultTimeNumber(startTime, endTime) {
				let startMinutes = this.timeToMinutes(startTime);
				let endMinutes = this.timeToMinutes(endTime);
				// 计算时间差（分钟）
				// 将时间差转换为小时，并保留小数部分
				this.differenceInMinutes = (endMinutes - startMinutes) / 60;
				console.log(this.differenceInMinutes);
			},
			//计算时间差  辅助方法：将时间字符串（HH:MM）转换为分钟  以分钟为单位
			timeToMinutes(timeStr) {
				const [hours, minutes] = timeStr.split(':').map(Number);
				return hours * 60 + minutes;
			},
			//获取当前用户
			queryCurrentUser() {
				uni.getStorage({
					key: 'passport',
					success: (res) => { // 使用箭头函数  
						this.reserveUserName = res.data; // 现在这里的 this 指向 Vue 组件实例  

					}
				});
			},
			//获取可选时间
			getAppointed(val) {
				let param = {
					roomId: this.roomInfo.id,
					currentData: val
				};
				console.log(param);
				util.request(
					api.MettingCheckCreate, param,
					'POST'
				).then((data) => {
					console.log(data);
					let a = data;
					this.timeArr = a;


				})

			},
			// 确定事件
			confirmDevices(data) {
				console.log(data);
				this.selectedDevices = data;
				this.selectedDevicesStr = data.map((el) => el.label).join("/");
				this.showDevicesList = false;
			},
			// 确定事件
			confirmGoods(data) {
				console.log(data);
				this.selectedGoods = data;
				this.selectedGoodsStr = data.map((el) => el.label).join("/");
				this.showGoodsList = false;
			},
			//取消事件
			handleCnacelGoods() {
				this.showGoodsList = false;
				console.log(this.showGoodsList);
			},
			//取消事件
			handleCnacelDevices() {
				this.showDevicesList = false;
				console.log(this.showDevicesList);
			},
			//选择设备
			selectDevices() {
				this.showDevicesList = true;
				console.log(this.showDevicesList);
			},
			//选择设备
			selectGoods() {
				this.showGoodsList = true;
				console.log(this.showGoodsList);
			},
			//选择日期
			selectDay(index, timestamp) {
				this.selectedIndex = index;
				this.selectedDate = timestamp;
				// console.log(day);
				this.getAppointed(timestamp)
			},
			getDateAndWeek(date) {
				// 示例用法
				let result = this.getNextWeekDates(date)
				console.log(result);
				this.selectedMonthStr = result[1];
				this.weekAndDayInfo = result[0];

			},
			//获取当前会议室信息
			async getRoomInfo(id) {
				console.log(id);
				const that = this;
				await util.request(
					api.SelectOneRoomUrl + id, {},
					'GET'
				).then((data) => {
					console.log(data);
					that.roomInfo = data;
					that.roomPrice = that.roomInfo.inPrice;
					that.totalPrice = that.roomInfo.inPrice;
					that.roomUrl = that.roomInfo.imageList[0].url;
					that.deviceList = that.roomInfo.deviceList.map(item => {
						return {
							...item,
							label: item.name,
							value: item.id
						}
					})
					that.getAppointed(that.InitDateTemp);

				})
			},
			//获取物品信息
			async queryGoodsList() {
				const that = this;
				await util.request(
					api.GoodsUrl, {},
					'GET'
				).then((data) => {
					that.goodList = data.rows.map(item => {
						return {
							...item,
							label: item.name,
							value: item.id
						}

					});
					console.log(data);
				})
			},
			//获取人员信息
			queryDepartmentList() {
				util.request(
					api.DepartmentUrl, {},
					'GET'
				).then((data) => {
					this.departmentList = data.rows.map(item => {
						const newItem = {
							...item,
							children: item.accounts.map(subItem => ({
								...subItem,
								pid: item.id
							}))
						};
						delete newItem.accounts;
						return newItem;
					});
					console.log(this.departmentList);
				})
			},

			//获取ui日期组件工具类
			getNextWeekDates(dateStr) {
				console.log(dateStr);
				// 将传入的日期字符串转换为日期对象
				let date = new Date(dateStr);
				console.log(date);
				let month = date.getMonth() + 1;
				let year = date.getFullYear();

				// 存储日期和星期的数组
				let result = [];

				// 循环获取后一周的日期
				for (let i = 0; i < 7; i++) {
					// 获取日期
					let day = date.getDate();
					let formattedDay = day < 10 ? "0" + day : day.toString();
					// 获取星期几（0 - 6，0为星期天）
					let weekday = date.getDay();
					let weekdayStr;
					switch (weekday) {
						case 0:
							weekdayStr = "日";
							break;
						case 1:
							weekdayStr = "一";
							break;
						case 2:
							weekdayStr = "二";
							break;
						case 3:
							weekdayStr = "三";
							break;
						case 4:
							weekdayStr = "四";
							break;
						case 5:
							weekdayStr = "五";
							break;
						case 6:
							weekdayStr = "六";
							break;
					}
					//将日期转换为时间戳
					let timestamp = new Date(year, month - 1, day).getTime();
					// 将日期和星期封装成对象并添加到数组
					result.push({
						date: formattedDay,
						weekday: weekdayStr,
						timestamp: timestamp
					});
					// 将日期增加一天
					date.setDate(date.getDate() + 1);
				}
				let monthStr = month < 10 ? "0" + month : month;
				let yearMonth = year + "年" + monthStr + "月";
				// let yearMonth
				this.selectedDate = result[0].timestamp;
				return [result, yearMonth];
			},
			//选择人员方法
			chooseCity(item) {
				console.log(item)
				console.log(this.cityIdArr)
				//先判断Id是否在数组中
				if (this.cityIdArr.includes(item.id)) {
					this.chooseCityList.forEach((val, key) => {
						if (val.id == item.id) { //如果在数组中，反选（删除）
							this.delCity(key)
						}
					})
					return false
				}

				if (this.chooseCityList.length >= this.maxCount) {
					uni.showToast({
						title: '最多选择' + this.maxCount + '个',
						icon: "none",
						duration: 2000
					});
					return false
				}
				let obj = {}
				if (this.level == 1) {
					obj = {
						"id": item.id,
						"name": item.name
					}
				} else if (this.level == 2) {
					obj = {
						"id": item.id,
						"name": item.name,
						"pid": item.pid,
						"pname": item.parentName
					}
				} else if (this.level == 3) {
					console.log(item)
					obj = {
						"id": item.id,
						"name": item.oneName + item.twoName + item.name,
						"oneId": item.oneId,
						"twoId": item.twoId,
						"oneName": item.oneName,
						"twoName": item.twoName,
						"threeName": item.name
					}
				}

				this.cityIdArr.push(item.id)
				this.chooseCityList.push(obj)
				//调用子组件方法动态改变滚动栏高度
				this.$nextTick(() => {
					this.$refs.moreselects.getViewHeight();
				});

			},
			show() {
				console.log(this.level)
				if (this.level == 1) {
					this.cityData = LevelOneData
				} else {
					this.cityData = this.departmentList;
				}
				this.$refs.cityMore.open()
			},
			switchLevel(id) {
				this.resetData()
				this.level = id
			},
			resetData() {
				this.cityIdArr = []
				this.chooseCityList = []
			},
			delCity(delId) {
				this.cityIdArr.forEach((item, index) => {
					if (this.chooseCityList[delId].id == item) {
						this.cityIdArr.splice(index, 1);
					}
				})
				this.chooseCityList.splice(delId, 1);
				this.$nextTick(() => {
					this.$refs.moreselects.getViewHeight();
				});
			},
			switchCity(index) {
				this.scrollTop = this.oldScrollTop
				//当视图渲染结束 重新设置为0
				this.$nextTick(() => {
					this.scrollTop = 0
				});
				this.cityIndex = index
			},
			scrollCity(val) {
				//记录scroll  位置
				this.oldScrollTop = val
			},
			closeCity() {
				this.$refs.cityMore.close()
			},
			queryCity() {
				console.log(this.chooseCityList);
				this.selectedAccountNames = this.chooseCityList.map(item => item.name).join('、');
				this.$refs.cityMore.close()
			},
			//字符串时间格式转化为时间戳格式
			dateStringToTimestamp(dateString) {
				const date = new Date(dateString);
				return date.getTime();
			},

			timestampToDateString(timestamp) {
				console.log('接收到的时间戳', timestamp);
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始计数，所以要加1，并且格式化补0
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			//动态改变按钮样式
			getButtonType(state) {
				switch (state) {
					case 1:
						return '#FFAF26';
					case 2:
						return '#bfb0b0';
					case 3:
						return '#006cf9';
					default:
						return '';
				}
			},
			//按钮选中状态
			getIsDisabled(state) {
				return state === 1 || state === 2;
			},
			changTime(val, index) {
				if (this.appointTimeArr.length < 2) {
					this.timeArr[index].status = 3;
					this.appointTimeArr.push(index);
					if (this.appointTimeArr.length == 2) {
						//同一块入如果点击之后再点击就取消选中状态
						if (this.appointTimeArr[0] == this.appointTimeArr[1]) {
							this.timeArr[this.appointTimeArr[0]].status = 0;
							this.appointTimeArr = [];
						} else {
							this.appointTimeArr = this.appointTimeArr.sort(function(a, b) {
								return a - b;
							});
							let len = this.appointTimeArr[1] - this.appointTimeArr[0];
							//判断预约的时间段内是否有已经预约的时间段
							for (let i = 0; i < len; i++) {
								if (this.timeArr[this.appointTimeArr[0] + i].status == 1) {
									this.showToast({
											type: 'warning',
											title: '预约非法',
											message: '已预约过的时间不允许预约！'
										}

									);
									this.timeStart = '';
									this.timeEnd = '';
									break;
								} else {
									this.timeArr[this.appointTimeArr[0] + i].status = 3;
									this.timeStart = this.timeArr[this.appointTimeArr[0]].timeOver;
									this.timeEnd = this.timeArr[this.appointTimeArr[1]].timeOver;

								}
							}

						}
					} else if (this.appointTimeArr.length == 1) { //当只点击了一块时，即只选择半个小时
						this.timeArr[this.appointTimeArr[0]].status = 3;
						this.timeStart = this.timeArr[this.appointTimeArr[0]].timeOver;
						this.timeEnd = this.timeArr[this.appointTimeArr[0]].timeOver;
					}
				} else if (this.appointTimeArr.length = 3) { //当前选中数组的长度等于3时，即点击了3次，则把前两个状态改为0，即未选中，把第三次点击时的状态设为3，即当前选中
					for (let i = 0; i < this.timeArr.length; i++) {
						if (this.timeArr[i].status === 3) {
							this.timeArr[i].status = 0;
						}
					}
					this.appointTimeArr = [];
					// this.appointTimeArr.push(index);         //解决时间选择与右侧表单数据不一致问题
					// this.timeArr[index].status = 3;
				}
				console.log(this.timeStart, this.timeEnd);
			},
		}
	}
</script>

<style scoped>
	.uv-button {
		height: 25px !important;
	}

	.uv-button--normal {
		font-size: 11px !important;
	}

	.review-info {
		width: 92%;
		margin-left: 4%;
		margin-top: 30rpx;
		background-color: white;
		height: 375rpx;
		border-radius: 26rpx;
	}

	.review-info-body {
		width: 94%;
		margin-left: 3%;
		/* background-color: pink; */
		height: 375rpx;
		padding-top: 3%;
		padding-bottom: 3%;
	}

	.review-info-botten {
		width: 92%;
		margin-left: 4%;
		margin-top: 30rpx;
		background-color: white;
		height: 190rpx;
		border-radius: 26rpx;
	}

	.review-info-botten-body {
		width: 94%;
		margin-left: 3%;
		/* background-color: pink; */
		height: 185rpx;
		/* padding-top: 3%; */
		padding-bottom: 3%;
	}

	.other-info {
		width: 92%;
		margin-left: 4%;
		margin-top: 25rpx;
		background-color: white;
		height: 375rpx;
		border-radius: 26rpx;
	}

	.other-info-body {
		width: 94%;
		margin-left: 3%;
		/* background-color: pink; */
		height: 375rpx;
		padding-top: 3%;
		padding-bottom: 3%;
	}

	.mid-under-box {
		position: relative;
		background-color: #e7f0fe;
		height: auto;
		overflow-y: auto;
	}

	.footer-button-info {
		width: 60%;
		height: 72rpx;
		line-height: 72rpx;
		margin-top: 24rpx;
		margin-left: 20%;
		background-color: #006CF9;
		color: white;
		border-radius: 26rpx;
		text-align: center;
	}

	.footer-button {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		background-color: white;
		box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.1);
	}

	.content-body {
		position: relative;
		height: auto;
	}

	.edit-page {
		pointer-events: none;
		/* 阻止点击操作 */
	}

	.image-container {
		position: relative;
		height: 300rpx;
	}

	.image-container image {
		width: 100%;
		height: 100%;
	}

	.top-image-top {
		position: absolute;
		top: 100rpx;
		left: 0;
		width: 100%;
		height: 200rpx;
		/* 使用linear-gradient实现渐变背景，方向为从下到上（to top） */
		background: linear-gradient(to top, rgba(29, 105, 220, 0.8), rgba(88, 153, 212, 0.4));
	}

	.selected {
		border-radius: 10rpx;
		background-color: #006cf9;
		color: white;
	}
</style>